<template>
  <div class="custom-detail-ctn">
    <van-nav-bar :title="$route.meta.title" left-text="返回" right-text="跟进登记" left-arrow :fixed="true" :placeholder="true" @click-left="goBack()" @click-right="goAddFollow" />
    <div class="tabBarBox">
      <van-tabs v-model="tabActive" offset-top="46" color="#1684FC">
        <van-tab title="客户信息" name="customer">
          <div class="customInfo">
            <van-field v-model="customInfo.showOrgName" name="展厅" label="展厅" input-align="right" readonly />
            <van-field v-model="customInfo.saleEmp" name="销售顾问" label="销售顾问" input-align="right" readonly />
            <van-field v-model="customInfo.number" name="客户编号" label="客户编号" input-align="right" readonly />
            <van-field v-model="customInfo.name" name="客户姓名" label="客户姓名" input-align="right" readonly />
            <div class="van-cell label-value">
              <span class="text">客户联系电话</span>
              <div class="right">
                <span>{{ customInfo.mobile1 }}</span>
                <!-- <a :href="`tel:${customInfo.mobile1}`"> -->
                <img @click="handleTel(customInfo.mobile1)" src="@/assets/images/icon_phone.png" alt />
                <!-- </a> -->
              </div>
            </div>
            <van-field v-model="customInfo.sourceChannelName" name="来源渠道" label="来源渠道" input-align="right" readonly />
            <van-field v-model="customInfo.interModelName" name="意向车系" label="意向车系" input-align="right" readonly />
            <van-field v-model="customInfo.arriveStop" name="是否到店" label="是否到店" input-align="right" readonly />
            <van-field v-model="customInfo.arriveTimes" name="到店次数" label="到店次数" input-align="right" readonly />
            <van-field v-model="customInfo.testDrive || '否'" name="是否试驾" label="是否试驾" input-align="right" readonly />
            <van-field v-model="customInfo.reviewCount" name="跟进次数" label="跟进次数" input-align="right" readonly />
            <van-field v-model="customInfo.createTime" name="建档日期" label="建档日期" input-align="right" readonly />
          </div>
        </van-tab>
        <van-tab title="跟进信息" name="follow">
          <div v-if="recordList && recordList.length != 0" class="list-container">
            <div class="item" v-for="item in recordList" :key="item.followId" @click="goAFollowDetail(item)">
              <div class="sub-title">
                <span class="followNumber">{{ item.followNumber }}</span>
                <div class="billStatus">{{ item.billStatus }}</div>
              </div>

              <div class="hall">
                <span class="row-title">所属展厅：</span>
                <span class="row-value">{{ item.followShowOrgName }}</span>
              </div>
              <div class="row">
                <div class="left">
                  <span class="row-title">跟进人员：</span>
                  <span class="row-value">{{ item.followPersonName }}</span>
                </div>
                <div class="right">
                  <span class="row-title">跟进日期：</span>
                  <span class="row-value">{{ item.followDate }}</span>
                </div>
              </div>
              <div class="row">
                <div class="left">
                  <span class="row-title">跟进方式：</span>
                  <span class="row-value">{{ item.followType }}</span>
                </div>
                <div class="right">
                  <span class="row-title">下次跟进日期：</span>
                  <span class="row-value">{{ item.nextFollowDate }}</span>
                </div>
              </div>
              <div class="row">
                <div class="left">
                  <span class="row-title">意向级别：</span>
                  <span class="row-value">{{ item.cusLevel }}</span>
                </div>
                <div class="right">
                  <span class="row-title">销售经理定级：</span>
                  <span class="row-value">{{ item.mgrLevel }}</span>
                </div>
              </div>
            </div>
          </div>
          <van-empty class="noContent" description="暂无数据" v-else />
        </van-tab>
        <van-tab title="意向车辆" name="car">
          <div v-if="carInfo" class="list-container">
            <div class="car-info" @click="goInventoryDetail(carInfo)">
              <div class="info-title">{{ carInfo.carModel }}</div>
              <div class="info-body">
                <div class="left">
                  <!-- <img src="@/assets/images/car.png" alt=""> -->
                  <img v-if="carInfo.imageCol && carInfo.imageCol.length > 0" :src="carInfo.imageCol[0].imageUrl" />
                  <div v-else class="noimg">暂无图片</div>
                </div>
                <div class="right">
                  <div class="car-shot-info">{{ carInfo.carNo + '|' + carInfo.regDate + '|' + carInfo.carMile }}</div>
                  <div class="row">
                    <span class="row-title">车架号：</span>
                    <span class="row-value">{{ carInfo.vinCode }}</span>
                  </div>
                  <div class="row">
                    <span class="row-title">采购展厅：</span>
                    <span class="row-value">{{ carInfo.showOrgName }}</span>
                  </div>
                  <div class="row">
                    <span class="row-title">采购人员：</span>
                    <span class="row-value">{{ carInfo.purName }}</span>
                  </div>
                  <div class="row">
                    <span class="row-title">入库日期：</span>
                    <span class="row-value">{{ carInfo.stockDate }}</span>
                  </div>
                  <div class="row">
                    <span class="row-title">库龄：</span>
                    <span class="row-value">{{ carInfo.stockDays }} 天</span>
                  </div>
                </div>
              </div>
              <div class="btn">
                <span class="button">库存</span>
              </div>
            </div>
          </div>
          <van-empty class="noContent" description="暂无数据" v-else />
        </van-tab>
      </van-tabs>
    </div>
    <!-- <div class="goBack" @click="$router.go(-1)">返回</div> -->
  </div>
</template>

<script>
import { isPhone } from "@/utils/util.js";
import sellManageApi from "@/api/sellManageApi";

const { secondHandCarFacade } = sellManageApi;
export default {
  data() {
    return {
      tabActive: "customer",
      // 客户信息
      customInfo: {},
      customInfo1: {
        billId: "单据ID", //单据ID
        showOrgName: "厦门集美凯迪拉克", // 展厅
        saleEmp: "陈某某", // 销售顾问
        number: "C-20230109005", // 客户编号
        name: "王某某", // 客户姓名
        mobile1: "18850549999", // 客户联系电话
        sourceChannelName: "垂直媒体-懂车帝", // 来源渠道
        interModelName: "CT5", // 意向车系
        arriveStop: "否", // 是否到店
        arriveTimes: "0", // 到店次数
        testDrive: "否", // 是否试驾
        reviewCount: "0", // 跟进次数
        createDate: "2022-05-06", // 建档日期
        carStockId: ""
      },
      // 跟进信息
      recordList: [],
      recordList1: [
        {
          followId: "1", //单据ID
          followNumber: "WL-20230506458", // 跟进单编号
          billStatus: 1, // 跟进单的状态
          followShowOrgName: "福州保时捷", // 所属展厅
          followPersonName: "陈欧某", // 跟进人员
          followDate: "2023-01-05", // 跟进日期
          followType: "电话", //跟进方式
          nextFollowDate: "2023-01-05", // 下次跟进日期
          cusLevel: "A", // 意向级别
          mgrLevel: "A" // 销售经理定级
        },
        {
          followId: "2", //单据ID
          followNumber: "WL-20230506458", // 跟进单编号
          billStatus: 1, // 跟进单的状态
          followShowOrgName: "福州保时捷", // 所属展厅
          followPersonName: "陈欧某", // 跟进人员
          followDate: "2023-01-05", // 跟进日期
          followType: "电话", //跟进方式
          nextFollowDate: "2023-01-05", // 下次跟进日期
          cusLevel: "A", // 意向级别
          mgrLevel: "A" // 销售经理定级
        },
        {
          followId: "3", //单据ID
          followNumber: "WL-20230506458", // 跟进单编号
          billStatus: 1, // 跟进单的状态
          followShowOrgName: "福州保时捷", // 所属展厅
          followPersonName: "陈欧某", // 跟进人员
          followDate: "2023-01-05", // 跟进日期
          followType: "电话", //跟进方式
          nextFollowDate: "2023-01-05", // 下次跟进日期
          cusLevel: "A", // 意向级别
          mgrLevel: "A" // 销售经理定级
        },
        {
          followId: "4", //单据ID
          followNumber: "WL-20230506458", // 跟进单编号
          billStatus: 1, // 跟进单的状态
          followShowOrgName: "福州保时捷", // 所属展厅
          followPersonName: "陈欧某", // 跟进人员
          followDate: "2023-01-05", // 跟进日期
          followType: "电话", //跟进方式
          nextFollowDate: "2023-01-05", // 下次跟进日期
          cusLevel: "A", // 意向级别
          mgrLevel: "A" // 销售经理定级
        }
      ],
      // 意向车辆信息
      carInfo: undefined,
      carInfo1: {
        billId: "ZSIAABJCLecFNhj1",
        carModel:
          "2019款上汽通用别克英朗三厢1.3T手自一体互联精英型（SGM7133LBA1）",
        carNo: "粤DE930E",
        regDate: "2021/04/20 ",
        carMile: "1.60万公里",
        vinCode: "LSGKE5419LW228207",
        showOrgName: "汕头红旗",
        // purName: '车闹三', // 车辆详情没有该字段，需要补充
        stockDate: "2023/10/23",
        stockDays: "25天",
        imageCol: [
          // {
          //   imageUrl: 'https://app.xm2auto.com:8888/common/image?imagePath=/opt/tc/images/mall/vehicle/202310/67786/fa5bf6465bee32b88d70cce4214d6c16.jpg'
          // }
        ]
      },
      loading: false,
      finished: false,
      carRequestParams: {
        codeNo: "", //车架号，非必填，String
        pageNo: 1, //页码，非必填，String
        userId: "", //用户ID，必填，String
        orgId: "", //登录组织Id，必填，String
        stockStartDate: "", //入库开始时间，非必填，String
        stockEndDate: "", //入库结束时间，非必填，String
        brandId: "", //品牌ID，非必填，String
        showOrgId: "", //展厅ID，非必填，String
        isGenContract: "", //是否生成销售合同，非必填，String
        billStatus: "", //库存状态，非必填，String
        isJySale: "", //是否寄售车辆，非必填，String
        method: "getCarStockList"
      }
    };
  },
  mounted() {
    console.log("route:", window.history);
    this.goTwo = this.$route.query.goTwo; // 是否返回2步
    console.log("gotow:", this.goTwo);
    // if (this.goTwo) {
    //   this.$router.go(-1)
    //   return
    // }
    this.detailId = this.$route.query.billId;
    localStorage.setItem("customerId", this.detailId);
    this.tabActive = this.$route.query.tabActive || "customer";
    console.log("tabActive:", this.tabActive);
    this.detailId = this.detailId ? this.detailId : this.$route.query.id;
    // this.detailId = 'Df7hqr1JRRCW6HVD6HtrfI6arxY='
    console.log("id:", this.detailId);
    // 客档列表页跳转过来了，根据客档ID查询客档，线索详情跳转过来，根据线索ID查询客档
    this.getCustomerDetail();
  },
  methods: {
    goBack() {
      const step = this.goTwo ? -2 : -1;
      console.log("step:", step);
      this.$router.go(step);
    },
    // 根据方法名获取数据
    async getDatas(params) {
      const res = await secondHandCarFacade(params);
      console.log("resdata:", res.data);
      return res.data;
    },
    // 根据车辆id查询意向车辆信息
    async getCarInfo(billId) {
      console.log("根据车辆id查询意向车辆信息");
      this.carRequestParams.carStockId = billId;
      const carList = await this.getDatas(this.carRequestParams);
      if (carList && carList.length > 0) {
        this.carInfo = carList[0];
      }
    },
    // 根据客档ID查询客档信息
    async getCustomerDetail() {
      console.log("根据客档ID查询客档信息");
      this.customInfo = await this.getDatas({
        method: "getCustomerById",
        billId: this.detailId
      });
      this.recordList = this.customInfo.customerFollow;
      if (this.customInfo.carStockId) {
        this.getCarInfo(this.customInfo.carStockId);
      }
    },
    // 点击电话
    handleTel(tel) {
      if (isPhone()) {
        window.location.href = `tel:${tel}`;
      } else {
        Notify({ type: "danger", message: "请在手机端使用此功能" });
      }
    },
    // 跳转库存详情
    goInventoryDetail(data) {
      console.log("goInventoryDetail");
      localStorage.setItem("billId", data.billId);
      // localStorage.setItem("billId", 'ZSIAABJCLecFNhj1');
      this.$router.push({
        path: "/inventoryManageDetail"
      });
    },
    // 跳转添加跟进
    goAddFollow() {
      this.$router.push({
        path: "/customManageFollowAdd",
        query: { customerId: this.detailId }
      });
    },
    // 跳转跟进详情
    goAFollowDetail(data) {
      this.$router.push({
        path: "/customManageFollowDetail",
        query: { billId: data.followId }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.custom-detail-ctn {
  // padding-top: 46px;
}
.tabBarBox {
  margin-bottom: 10px;
  font-size: 14px;
}
.customInfo {
  height: 84vh;
  overflow-y: auto;
  .label-value {
    justify-content: space-between;
    align-items: center;
    .text {
      color: #646566;
    }
    .right {
      display: flex;
      align-items: center;
      a {
        line-height: normal;
      }
      img {
        margin-left: 3px;
      }
    }
  }
}
.list-container {
  margin: 10px;
  max-height: 80vh;
  overflow-y: auto;
  .item {
    padding: 15px 5px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 15px;
    color: #101010;
    font-size: 14px;
    // width: 100%;
    .sub-title {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f4f4f4;
      padding-bottom: 10px;
      .followNumber {
        font-size: 15px;
        color: #000000;
      }
      .billStatus {
        color: #88cf65;
        border: 1px solid #88cf65;
        font-size: 12px;
        border-radius: 3px;
        padding: 2px 15px 4px;
        text-align: center;
        margin-left: 10px;
      }
    }
    .hall {
      margin-top: 10px;
    }
    .row {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      .left {
        width: 40%;
      }
      .right {
        width: 60%;
      }
    }
  }
}
.car-info {
  padding: 15px;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 15px;
  color: #101010;
  font-size: 13px;
  .info-title {
    // font-size: 15px;
    color: #000000;
    margin-bottom: 10px;
  }
  .info-body {
    display: flex;
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid #f4f4f4;
    padding: 10px 0;
    .left {
      width: 28%;
      img {
        width: 82px;
        height: 80px;
      }
      .noimg {
        text-align: center;
        width: 80px;
        height: 80px;
        line-height: 80px;
        border-radius: 5px;
        // border: 1px solid #ccc;
        color: #999;
        font-size: 13px;
        background: #f4f4f4;
      }
    }
    .right {
      width: 72%;
      .row {
        margin-top: 10px;
      }
    }
  }
  .btn {
    padding-top: 10px;
    text-align: right;
    .button {
      background: #88cf65;
      color: #fff;
      font-size: 11px;
      border-radius: 3px;
      padding: 5px 20px;
      text-align: center;
    }
  }
}
.goBack {
  width: 80%;
  background: #2381e6;
  color: #fff;
  font-size: 16px;
  margin: auto;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  margin-bottom: 25px;
  margin-top: 25px;
}
</style>